/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React,{Component} from 'react';
// var Icon = require('react-native-vector-icons/Ionicons');  // 这种为什么不行？？？
import Icon from 'react-native-vector-icons/Ionicons';

// var ReactNative = require('react-native');
import {
  StyleSheet,
  TabBarIOS,
  AppRegistry,
  Image,
  Text,
  View,
} from 'react-native';

var List = require('./App/creation/index.js');
var Edit = require('./App/edit/index.js');
var Account = require('./App/account/index.js');


var App = React.createClass({
  statics: {
    title: '<TabBarIOS>',
    description: 'Tab-based navigation.',
  },

  // displayName: 'TabBarExample', 

  getInitialState: function() {
    return {
      selectedTab: 'List',
      notifCount: 0,
      presses: 0,
    };
  },
  
  render: function() {
    return (
      <TabBarIOS
        unselectedTintColor="yellow"
        tintColor="white"
        barTintColor="darkslateblue">
        <Icon.TabBarItemIOS
          title="List"
          iconName='ios-videocam-outline'
          selectedIconName = 'ios-videocam'
          selected={this.state.selectedTab === 'List'}
          onPress={() => {
            this.setState({
              selectedTab: 'List',
            });
          }}>
          <List />
        </Icon.TabBarItemIOS>
        <Icon.TabBarItemIOS
          title = 'Edit'
          iconName = 'ios-recording-outline'
          selectedIconName = 'ios-recording'
          badge={this.state.notifCount > 0 ? this.state.notifCount : undefined}
          selected={this.state.selectedTab === 'Edit'}
          onPress={() => {
            this.setState({
              selectedTab: 'Edit',
              notifCount: this.state.notifCount + 1,
            });
          }}>
          <Edit />
        </Icon.TabBarItemIOS>
        <Icon.TabBarItemIOS
          iconName = 'ios-more-outline'
          selectedIconName = 'ios-more'
          title="Account"
          selected={this.state.selectedTab === 'Account'}
          onPress={() => {
            this.setState({
              selectedTab: 'Account',
              presses: this.state.presses + 1
            });
          }}>
          <Account />
        </Icon.TabBarItemIOS>
      </TabBarIOS>
    );
  },

});

// module.exports = App; 

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },

  tabContent: {
    flex: 1,
    alignItems: 'center',
  },
  tabText: {
    color: 'white',
    margin: 50,
  },
});

AppRegistry.registerComponent('ShowDog', () => App);
